<template>
	<view>
		<!-- 顶部组件 -->
		<u-navbar is-back :background="{ background: 'transparent' }" :border-bottom="false" title="我的红包" title-size="28" title-color="#fff" back-icon-color="#fff" ></u-navbar>
		<view class="top u-flex-col">
			<view class="price">
				<text>￥</text>
				<text class="main">0</text>
			</view>
			<view class="desc">
				红包余额
			</view>
		</view>
		<view class="tips u-flex-col">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/b01b6560-ab45-11ea-a30b-e311646dfaf2.png"></image>
			<view class="text">
				暂无红包
			</view>
			<view class="btn" @click="goHome">
				去首页逛逛
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods:{
		goHome(){
			uni.switchTab({
				url:'../../tabbar/index/index'
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}
.top{
	position: fixed;
	top: 0;
	justify-content: center;
	align-items: center;
	padding-top: 60rpx;
	width: 750rpx;
	height: 442rpx;
	color: #fff;
	background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/b028d2e0-ab45-11ea-a30b-e311646dfaf2.png') top no-repeat / 100% 100%;
	.price{
		font-size: 42rpx;
		font-weight: bold;
		.main {
			font-size: 88rpx;
			font-family: 'KMedium';
		}
	}
	.desc{
		margin-top: 20rpx;
		font-size: 28rpx;
		opacity: .4;
	}
}
.tips {
	align-items: center;
	margin-top: 442rpx;
	image{
		width: 180rpx;
		height: 180rpx;
	}
	.text {
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
	}
	.btn {
		font-size: 28rpx;
		margin-top: 40rpx;
		height: 62rpx;
		width: 196rpx;
		line-height: 62rpx;
		text-align: center;
		border-radius: 31rpx;
		background-color: #fff;
		border: 1.5rpx solid #a1a1a1;
	}
}
</style>
